<template>
	<view>
		<view class="head-title">
			<view>
				我收藏的水结晶照片
				<text v-if="selectionMode">(长按选择照片)</text>
				<text v-else>(长按删除)</text>
			</view>
			<view class="footer">
				<view class="login-notes" v-if="phone" @longpress="manualSync">
					{{phone}} 已登录 
					<text class="address-ad-text" @tap='logout'>退出账号</text>
					<!-- <text class="address-ad-text" @tap='logout'>退出账号</text> -->
				</view>
				<view class="login-notes" v-else>
					<button type="primary" size="mini" @tap='showLogin=true'>登录</button>
					后可同步收藏夹
				</view>
			</view>
		</view>
		<image-list :imgIds="imgList" :numPerRow="5" :addBtn="false" @imglongpress="delImgOrSelect"></image-list>
		<login-box v-if="showLogin" @cancel="showLogin=false" @login="refreshStar"></login-box>
	</view>
</template>

<script>
	import LoginBox from '../../components/login-box.vue'
	import ImageList from '../../components/image-list.vue'
	import sys from '../../common/sys.js'
	import utils from '../../common/function.js'
	import {
		CacheList
	} from '../../common/cache.js'
	import {
		CrystalImage, User
	} from '../../common/service.js'
	const USER = new User()
	const IMG = new CrystalImage()
	
	export default {
		components: {
			LoginBox,
			ImageList
		},
		data() {
			return {
				imgList: [],
				selectionMode: false,
				showDetail: false,
				showLogin: false,
				phone:'',
			}
		},
		onLoad: async function(options) {
			sys.toast_loading('加载中')
			if (options.selectionMode) {
				this.selectionMode = true
			}
			let uid = await USER.getId()
			if(uid){
				this.phone=uid
			}
			this.imgList = await IMG.getMyStarList()
		},
		methods: {
			delImgOrSelect: async function(e) {
				if (this.selectionMode) {
					new CacheList('imgList').push(e.imgId)
					sys.navigateBack()
				} else {
					if (await sys.modal('确认删除？', '')) {
						IMG.cancelStar(e.imgId)
						this.imgList = this.imgList.filter(id => id != e.imgId)
					}
				}
			},
			refreshStar: async function(userId){
				console.log('login success')
				this.showLogin = false
				sys.toast_loading('刷新中')
				this.imgList = await IMG.getMyStarList()
				this.phone = userId
			},
			logout: async function(){
				if (await sys.modal('确认退出登录？', '登出后将清空本机收藏夹缓存以及点赞记录')) {
					USER.logout()
					this.phone=''
					this.imgList = []
					sys.toast_done('已登出')
				}
			},
			manualSync: async function(){
				sys.toast_loading('同步中')
				let user = await USER.getInfo()
				if(user.starImages){
					sys.toast('同步'+user.starImages.length+'图片')
					this.imgList = user.starImages
					await IMG.syncMyStarList(user.starImages)
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #2d3132;
	}

	.head-title {
		width: 100%;
		color: #ccc;
		text-align: center;
		padding-top: 10px;
	}

	.cp-image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 3px;
	}

	.cp-container {
		grid-template-columns: repeat(auto-fill, 140rpx);
	}
	.login-notes{
		/* border: 1px solid #666; */
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.footer{
		position: fixed;
		bottom: 0;
		padding: 3px 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #666;
	}
	.address-ad-text{
		text-decoration: underline;
		color: #33c;
		border-radius: 3px;
		padding: 0 3px;
		margin: 0 5px;
	}
</style>
